<template>
	<view :style="[{ paddingTop: StatusBar + 'px' }]">
		<view class="bg-white" style="padding: 20px 20px 0 20px">
			<view style="position: relative; height: 50rpx;">
				<my-select style="position: absolute;left: -35rpx; width: 70%; font-weight: bold;" range-key="text"
					value-key="value" dict-code="crm_company,name,id" v-model="company" />
			</view>
			<view style="margin-top:20px;padding: 15px;background-color: #4591FE;border-radius: 20px;">
				<view
					style="display: flex;align-items: center;position: relative;border-bottom: 1px solid rgba(255, 255, 255, 7%);padding: 5px 0 10px 0;">
					<view>
						<image src="@/static/images/group.png" style="width: 40px;height: 40px"></image>
					</view>
					<view style="margin-left: 15px;">
						<view>
							<text style="font-size: 18px;font-weight: bold;color: #FFFFFF;">
								{{dataObj.todayOnHand}}
							
							</text>
						</view>
						<view>
							<text class="titleText">今日待办</text>
						</view>
					</view>
					<view style="position: absolute;right: 10px;">
						<uni-badge class="uni-badge-left-margin" :text="numOne" absolute="rightTop" size="small" :offset="[4, 4]">
							<view @click="toDetails" class="detailsBtn">详情</view>
						</uni-badge>
					</view>
				</view>
				<view>

					<view style="position: absolute;right: 45px;">
						<uni-badge class="uni-badge-left-margin" :text="dataObj.todayOnHand" absolute="rightTop" size="small" :offset="[4, 4]">
							<view @click="toBeSubmitted" class="detailsBtn">待提交</view>
						</uni-badge>
					</view>

					<view style="margin-top: 10px;">
						<text class="titleText">{{dataObj.monthTitle}}</text>
					</view>
					<view style="margin-top: 8px;" v-for="(item,index) in homeOnHandList" v-if="item.title=='待审核'">
						<!-- <text class="titleText">{{item.title}}：{{item.num}}次</text> -->
						<text class="titleText">{{item.title}}：{{numOne}}次</text>
					</view>

				</view>
			</view>
		</view>
		<view style="background-color: #fbfbfb;padding: 20px;">
			<view class="menuTitle">
				常用应用
			</view>
			<view class="cu-list grid col-4 no-border" style="border-radius: 16px;padding: 20px 0;margin-bottom: 20px;">
				<view class="cu-item" v-for="(item,index) in usList" :key="index" @tap="goPage(item.page)">
					<view>
						<image :src="item.icon" style="width: 40px;height: 40px"></image>
					</view>
					<text style="font-size: 10px;font-weight: 400;color: #101317;">{{item.title}}</text>
				</view>
			</view>
			<view class="menuTitle">
				宿舍工具
			</view>
			<view class="cu-list grid col-4 no-border" style="border-radius: 16px;padding: 20px 0;margin-bottom: 20px;">
				<view class="cu-item" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
					<view>
						<image :src="item.icon" style="width: 40px;height: 40px"></image>
					</view>
					<text style="font-size: 10px;font-weight: 400;color: #101317;">{{item.title}}</text>
				</view>
			</view>
			<view class="menuTitle">
				历史工具
			</view>
			<view class="cu-list grid col-4 no-border" style="border-radius: 16px;padding: 20px 0;margin-bottom: 20px;">
				<view class="cu-item" v-for="(item,index) in hsList" :key="index" @tap="goPage(item.page)">
					<view>
						<image :src="item.icon" style="width: 40px;height: 40px"></image>
					</view>
					<text style="font-size: 10px;font-weight: 400;color: #101317;">{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		us,
		os,
		hs
	} from '@/common/util/work.js'
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				index: 0,
				company: '1754477887087374337',
				picker: ['福建新华源纺织', '公司1', '公司'],
				needWork: 10,
				beLate: 10,
				lackCards: 1,
				absenteeism: 22,
				usList: us.data,
				osList: os.data,
				hsList: hs.data,
				msgCount: 0,
				dot: {
					mailHome: false
				},
				dataObj: [],
				homeOnHandList: [],
				numOne: 0, // 待审核
				numTwo: 0 //待提交
			}
		},
		mounted() {

		},
		created() {
			this.getNum()
			this.getList()
		},
		computed: {

		},
		methods: {
			// 获取待审核和待提交 详情是待审核的 待办是待提交 
			getNum() {
				let params = {
					pageNo: 1,
					pageSize: 10,
					status: 3 // 待审核
				}
				let paramsOne = {
					pageNo: 1,
					pageSize: 10,
					status: 1 // 待提交
				}

				this.$http.get("/crm_on_hand/crmOnHand/list", {
					params: params
				}).then(res => {
					if (res.data.success) {
						this.numOne = res.data.result.total
					}
				})
				this.$http.get("/crm_on_hand/crmOnHand/list", {
					params: paramsOne
				}).then(res => {
					if (res.data.success) {
						this.numTwo = res.data.result.total
					}
				})
			},

			getList() {
				console.log("获取列表")
				this.$http.get("/crm_on_hand/crmOnHand/queryHomeOnHand", {}).then(res => {
					if (res.data.success) {
						console.log('首页res.data', res.data)
						this.homeOnHandList = res.data.result.homeOnHandList
						this.dataObj = res.data.result
					}
				})
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			toDetails() {
				uni.navigateTo({
					url: '/pages/toDoList/index'
				})
			},
			toBeSubmitted() {
				uni.navigateTo({
					url: '/pages/toBeSubmitted/index'
				})
			},
			goPage(page) {
				if (!page) {
					return false;
				}
				if (page === 'annotationList') {
					this.msgCount = 0
				}
				this.dot[page] = false
				this.$Router.push({
					name: page
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cu-form-group uni-picker::after {
		font-family: cuIcon;
		display: block;
		content: "";
		position: absolute;
		font-size: 17px;
		color: #8799a3;
		width: 31px;
		text-align: center;
		top: 0;
		bottom: 0;
		right: -10px;
		margin: auto;
	}

	.titleText {
		font-size: 14px;
		color: #FFFFFF;
		font-weight: 300;
	}

	.detailsBtn {
		background-color: #FFFFFF;
		text-align: center;
		padding: 8px 20px;
		border-radius: 30px;
		color: #000000;
		font-weight: bold;
	}

	.menuTitle {
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 16px;
		font-weight: bold;
		color: #101317;
	}
</style>